<template>
  <div class="users">
    <el-card>
      <template #header>
        <span>用户管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addUser">添加用户</el-button>
      </template>
      
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
              {{ scope.row.status === 'active' ? '活跃' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="editUser(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Users',
  data() {
    return {
      userList: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', status: 'active' },
        { id: 2, name: '李四', email: 'lisi@example.com', status: 'active' },
        { id: 3, name: '王五', email: 'wangwu@example.com', status: 'inactive' }
      ]
    }
  },
  methods: {
    addUser() {
      this.$message.success('添加用户功能')
    },
    editUser(user) {
      this.$message.info(`编辑用户: ${user.name}`)
    },
    deleteUser(id) {
      this.$message.warning(`删除用户: ${id}`)
    }
  }
}
</script>

<style scoped>
.users { padding: 20px; }
</style>
